<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf语法</title>
    <script type="text/javascript" src="/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
           $("#modify").click(function(){
               let id = $(this).attr("data-id");
               console.log("id:"+id);
           });
        });
    </script>
</head>
<body>
<h1>取request作用域值</h1>
不识别标签(相当于jquery的text方法):<span th:text="${msg}"></span><br/>
识别标签(相当于jquery的html方法):<span th:utext="${msg}"></span><br/>
不识别标签(相当于jquery的text方法):[[${msg}]]<br/>
识别标签(相当于jquery的html方法):[(${msg})]<br/>
<h1>取其他作用域值</h1>
session:<span th:text="${session.user.username}"></span><br/>
application:[[${application.user2.id}]]
<h1>属性赋值</h1>
<a href="javascript:;" id="modify" th:data-id="${id}">修改</a>
<h1>if判断</h1>
<span th:if="${age < 5}">婴儿</span>
<span th:if="${age < 16}">少年</span>
<span th:if="${age < 30}">青年</span>
<span th:if="${age < 50}">中年</span>
<span th:if="${age >= 50}">老年</span>
<h1>unless判断</h1>
<span th:unless="${age < 5}">婴儿</span>
<span th:unless="${age < 16}">少年</span>
<span th:unless="${age < 30}">青年</span>
<span th:unless="${age < 50}">中年</span>
<span th:unless="${age >= 50}">老年</span>
<h1>switch判断</h1>
<span th:switch="${role}">
    <!--<span th:case="student">学生</span>-->
    <span th:case="teacher">老师</span>
    <span th:case="user">用户</span>
    <span th:case="emp">雇员</span>
    <span th:case="programmer">程序员</span>
    <span th:case="businessman">商人</span>
    <span th:case="*">其他</span>
</span>

<h1>遍历</h1>
<table border="1">
    <tr>
        <th>序号</th>
        <th>编号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    <!--<tr th:each="user:${users}">-->
    <tr th:each="user,i:${users}">
        <td>[[${i.index+1}]]</td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${user.phone}"></td>
        <td th:text="${user.address}"></td>
        <td>
            <a href="javascript:;">修改</a>
            <a href="javascript:;" onclick="return confirm('是否确认删除')">删除</a>
        </td>
    </tr>
</table>
<hr/>
<table border="1">
    <tr>
        <th>编号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    <tr th:each="user:${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${user.phone}"></td>
        <td th:text="${user.address}"></td>
        <td>
            <a href="#showModify">修改</a>
            <a href="javascript:;" onclick="return confirm('是否确认删除')">删除</a>
        </td>
    </tr>
</table>

<h1 id="showModify">使用属性赋值的方式设置默认值</h1>
<form action="">
    编号:<input type="text" th:value="${user.id}"/><br/>
    用户名:<input type="text" th:value="${user.username}"/><br/>
    密码:<input type="password" th:value="${user.password}"/><br/>
    电话:<input type="text" th:value="${user.phone}"/><br/>
    地址:<input type="text" th:value="${user.address}"/><br/>
    <input type="submit" value="修改">
</form>


<h1 id="showModify2">使用field属性的方式设置默认值</h1>
<form action="">
    编号:<input type="text" th:field="${user.id}"/><br/>
    用户名:<input type="text" th:field="${user.username}"/><br/>
    密码:<input type="password" th:field="${user.password}"/><br/>
    电话:<input type="text" th:field="${user.phone}"/><br/>
    地址:<input type="text" th:field="${user.address}"/><br/>
    <input type="submit" value="修改">
</form>
<h1 id="showModify3">使用object-field属性的方式设置默认值</h1>
<form action="" th:object="${user}">
    编号:<input type="text" th:field="*{id}"/><br/>
    用户名:<input type="text" th:field="*{username}"/><br/>
    密码:<input type="password" th:field="*{password}"/><br/>
    电话:<input type="text" th:field="*{phone}"/><br/>
    地址:<input type="text" th:field="*{address}"/><br/>
    <input type="submit" value="修改">
</form>













<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>